<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <select name="" id="province">
        <option value="">请选择</option>
    </select>
    <select name="" id="city">
        <option value=""></option>
        
    </select><br/>
    <label for="">你选择的是<span class="texts"></span></label>
    
    
    <script>
        var all=[
            {
                province:'广东省',
                code:1,
                city:[
                    '广州',
                    '深圳',
                    '中山',
                    '玉山',
                ]
            },
            {
                province:'广西省',
                code:2,
                city:[
                    '南宁',
                    '柳州',
                    '桂林',
                    '北海',
                ]
            },
            {
                province:'湖南省',
                code:3,
                city:[
                    '长沙',
                    '岳阳',
                    '湘潭',
                    '常德',
                ]
            },
            {
                province:'四川省',
                code:4,
                city:[
                    '成都',
                    '重庆',
                    '天津',
                    '绵阳',
                ]
            },
        ];
        var span=document.querySelector('.texts')
        var province=document.querySelector("#province")
        var city=document.querySelector("#city")
        for(var i in all)  //遍历数组把数组的省份和code值给新建的结点node(option)
        {
            var node=document.createElement('option')
            node.innerText=all[i].province
            node.value=all[i].code;
            province.appendChild(node)
            // console.log(node.innerText);
        }
        province.onchange=function()   //当省份的值发生改变时
        {
            var v=this.value;
            console.log(v);
            var citys=[]  //新建一个数组
            for(var i in all)   
            {
                if(all[i].code==v)  //用code值来判断选的是那个省
                {
                    span.innerText=all[i].province  
                    citys=all[i].city;          //把对应code省份的城市存入新数组中
                    // console.log(citys);
                    break;
                }
            }
            city.innerHTML=''  //每选择省份一次把前面选择的省份城市清空,然后再创建结点添加(执行后面的代码)
            for(var i in citys)  //再遍历存入城市的新数组，并创建结点进行存放
            {
                var node=document.createElement('option')
                node.innerText=citys[i]
                // node.value=all[i].code;
                city.appendChild(node)
                // console.log(node.value);
            }
            city.onchange=function()
            {
                span.innerText=this.value
            
            }
        }
        
    </script>
</body>
</html>